Merge pull request #6 from lordvkrum/10-want-page

adding want services
mayel · Jan 24, 2017 · e6ba098 · e6ba098
2 parents 9daab88 + 4d0f643
commit e6ba098
Show file tree

Hide file tree

Showing 35 changed files with 583 additions and 268 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -7,6 +7,7 @@ import { AuthService } from '../services/AuthService';
 import { LoginPage } from '../pages/login/login';
 import { HomePage } from '../pages/home/home';
 import { OfferPage } from '../pages/offer/offer';
+import { WantPage } from '../pages/want/want';
 import { MembersPage } from '../pages/members/members';
 
 @Component({
@@ -27,6 +28,7 @@ export class LetsApp {
     this.pages = [
       { title: 'Home', component: HomePage },
       { title: 'Offers', component: OfferPage },
+      { title: 'Wants', component: WantPage },
       { title: 'Members', component: MembersPage }
     ];
     this.initializeApp();

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { AuthService } from '../services/AuthService';
 import { ConfigService } from '../services/ConfigService';
 import { TransactionService } from '../services/TransactionService';
 import { OfferService } from '../services/OfferService';
+import { WantService } from '../services/WantService';
 import { AlertService } from '../services/AlertService';
 import { MemberService } from '../services/MemberService';
 import { CategoriesService } from '../services/CategoriesService';
@@ -20,6 +21,9 @@ import { HomePage } from '../pages/home/home';
 import { OfferPage } from '../pages/offer/offer';
 import { OfferDetailPage } from '../pages/offerDetail/offerDetail';
 import { AddOfferPage } from '../pages/addOffer/addOffer';
+import { WantPage } from '../pages/want/want';
+import { WantDetailPage } from '../pages/wantDetail/wantDetail';
+import { AddWantPage } from '../pages/addWant/addWant';
 import { UnixTimeToMoment } from '../pipes/UnixTimeToMoment';
 import { ObjectKeys } from '../pipes/ObjectKeys';
 import { MembersPage } from '../pages/members/members';
@@ -34,6 +38,9 @@ import { MemberDetailModal } from '../pages/memberDetail/memberDetail';
     OfferPage,
     OfferDetailPage,
     AddOfferPage,
+    WantPage,
+    WantDetailPage,
+    AddWantPage,
     UnixTimeToMoment,
     ObjectKeys,
     MembersPage,
@@ -55,6 +62,9 @@ import { MemberDetailModal } from '../pages/memberDetail/memberDetail';
     OfferPage,
     OfferDetailPage,
     AddOfferPage,
+    WantPage,
+    WantDetailPage,
+    AddWantPage,
     MembersPage,
     MemberDetailModal
   ],
@@ -64,6 +74,7 @@ import { MemberDetailModal } from '../pages/memberDetail/memberDetail';
     ConfigService,
     TransactionService,
     OfferService,
+    WantService,
     AlertService,
     CategoriesService,
     FieldTypesService,

diff --git a/src/app/app.scss b/src/app/app.scss
@@ -15,6 +15,10 @@
 // for the .md, .ios, or .wp mode classes. The mode class is
 // automatically applied to the <body> element in the app.
 
+html {
+	font-size: 1em;
+}
+
 ion-header {
 	text-align: center;
 	.toolbar-background {
@@ -34,17 +38,9 @@ ion-menu {
 	}
 }
 
-.ui.cards {
-	.ui.card {
-		.description {
-			max-height: 55px;
-			overflow-y: hidden;
-		}
-	}
-}
-
-.ui.card {
+.ui.card>.content{
 	.author {
+		text-align: right;
 		padding-top: 10px;
 	}
 }
@@ -62,4 +58,8 @@ ion-menu {
 	position: fixed;
 	right: 15px;
 	bottom: 15px;
+}
+
+.ui.dropdown.button {
+	text-align: center;
 }
diff --git a/src/app/app.settings.ts b/src/app/app.settings.ts
@@ -12,7 +12,7 @@ export class AppSettings {
 			transactions: `${this.SERVER_URL}/transaction`,
 			offers: `${this.SERVER_URL}/offer`,
 			wants: `${this.SERVER_URL}/want`,
-			members: '${this.SERVER_URL}/member'
+			members: `${this.SERVER_URL}/member`
 		};
 	}
 

diff --git a/src/components/fieldBuilder/fieldBuilder.html b/src/components/fieldBuilder/fieldBuilder.html
@@ -10,7 +10,7 @@
 		</div>
 	</div>
 
-	<div *ngSwitchCase="'categories'" class="ui multiple search selection dropdown">
+	<div *ngSwitchCase="'categories'" class="ui search multiple selection dropdown">
 		<input type="hidden" [formControlName]="field.name" [required]="field.required" [attr.data-field]="field.name">
 		<i class="dropdown icon"></i>
 		<div class="default text">{{ field.placeholder || '' }}</div>
@@ -19,10 +19,23 @@
 		</div>
 	</div>
 
+	<div *ngSwitchCase="'member'" class="ui search normal selection dropdown">
+		<input type="hidden" [formControlName]="field.name" [required]="field.required" [attr.data-field]="field.name">
+		<i class="dropdown icon"></i>
+		<input class="search" autocomplete="off" tabindex="0" (keyup)="autocompleteSearch">
+		<div class="default text">{{ field.placeholder || '' }}</div>
+		<div class="menu">
+			<div class="item" [attr.data-value]="option.id" *ngFor="let option of field._options">{{ option.name }}</div>
+		</div>
+	</div>
+
 	<div *ngSwitchCase="'image'" class="ui image">
 		<img *ngIf="field.imgSrc" [src]="field.imgSrc">
 	</div>
-	<button *ngSwitchCase="'image'" class="ui button" (click)="addImage()">Add Image</button>
+	<div *ngSwitchCase="'image'" class="ui two buttons">
+		<button class="ui green fluid button" (click)="addImage()"><i class="image icon"></i>Add Image</button>
+		<button class="ui fluid button" (click)="takePhoto()"><i class="photo icon"></i>Take Photo</button>
+	</div>
 	<input *ngSwitchCase="'image'" type="hidden" [required]="field.required" [formControlName]="field.name" [attr.data-field]="field.name">
 
 	<input *ngSwitchDefault type="text" [placeholder]="field.placeholder || ''" [required]="field.required" [formControlName]="field.name" [attr.data-field]="field.name">

diff --git a/src/components/fieldBuilder/fieldBuilder.ts b/src/components/fieldBuilder/fieldBuilder.ts
@@ -1,7 +1,12 @@
 import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { AppSettings } from '../../app/app.settings';
+import { HttpBasicAuth } from '../../services/HttpBasicAuth';
 import { CategoriesService } from '../../services/CategoriesService';
+import { FieldTypesService } from '../../services/FieldTypesService';
+import { AlertService } from '../../services/AlertService';
 import * as moment from 'moment';
+import * as lodash from 'lodash';
 declare var $: any;
 
 @Component({
@@ -14,13 +19,24 @@ export class FieldBuilderComponent implements OnInit, AfterViewInit {
 	@Output() changed = new EventEmitter<any>();
 	validationMessages: any = {};
 	private categories;
+	private fieldTypes;
+	private autocompleteService;
+	private autocompleteFragment;
 
-	constructor(private formBuilder: FormBuilder,
-		private categoriesService: CategoriesService) {
+	constructor(private settings: AppSettings,
+		private httpBasicAuth: HttpBasicAuth,
+		private formBuilder: FormBuilder,
+		private alertService: AlertService,
+		private categoriesService: CategoriesService,
+		private fieldTypesService: FieldTypesService) {
 		this.categoriesService.categories.subscribe(
 			response => {
 				this.categories = response;
 			});
+		this.fieldTypesService.fieldTypes.subscribe(
+			response => {
+				this.fieldTypes = response;
+			});
 	}
 
 	ngOnInit(): void {
@@ -101,6 +117,17 @@ export class FieldBuilderComponent implements OnInit, AfterViewInit {
 					}
 				});
 				break;
+			case 'member':
+				this.autocompleteService = this.fieldTypes[this.field.type].autocomplete;
+				this.autocompleteSearch();
+				$field.parents('.ui.dropdown').dropdown({
+					onChange: (value) => {
+						let fieldValue = {};
+						fieldValue[this.field.name] = value;
+						this.fieldForm.setValue(fieldValue);
+					}
+				});
+				break;
 		}
 	}
 
@@ -124,9 +151,38 @@ export class FieldBuilderComponent implements OnInit, AfterViewInit {
 	}
 
 	addImage() {
-		(<any>navigator).camera.getPicture((image) => {
-			this.field.imgSrc = image;
-		});
+		this.addImageToField(0); // PHOTOLIBRARY
+	}
+
+	takePhoto() {
+		this.addImageToField(1); // CAMERA
+	}
+
+	addImageToField(sourceType) {
+		(<any>navigator).camera.getPicture(image => {
+			this.field.imgSrc = `data:image/jpeg;base64,${image}`;
+			let fieldValue = {};
+			fieldValue[this.field.name] = this.field.imgSrc;
+			this.fieldForm.setValue(fieldValue);
+		}, null, {
+				destinationType: 0, // DATA_URL
+				sourceType: sourceType
+			});
+	}
+
+	autocompleteSearch(event?) {
+		let target = event && (event.target || event.srcElement);
+		this.autocompleteFragment = (target && target.value) || '';
+		this.httpBasicAuth.getAutocomplete(this.autocompleteService, this.autocompleteFragment)
+			.subscribe(
+			(response: any) => {
+				this.field._options = lodash.map(response, (option: any, key) => {
+					option.id = key;
+					return option;
+				});
+			},
+			error => this.alertService.showError('Connection problem!')
+			);
 	}
 
 }
diff --git a/src/domain/Want.ts b/src/domain/Want.ts
@@ -0,0 +1,10 @@
+export class Want {
+  [property: string]: any;
+  id?: string;
+  title: string;
+  description: string;
+  user_id: string;
+  name: string;
+  expires: string;
+  uri?: string;
+}
diff --git a/src/pages/addOffer/addOffer.ts b/src/pages/addOffer/addOffer.ts
@@ -35,7 +35,7 @@ export class AddOfferPage implements OnInit {
 			response => this.viewCtrl.dismiss({
 				success: true
 			}),
-			error => this.alertService.showError('Connection problem!')
+			error => this.alertService.showError(error)
 			);
 	}
 

diff --git a/src/pages/addWant/addWant.html b/src/pages/addWant/addWant.html
@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <h2 class="ui header">New Want</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>
diff --git a/src/pages/addWant/addWant.scss b/src/pages/addWant/addWant.scss
@@ -0,0 +1,3 @@
+page-add-want {
+
+}
diff --git a/src/pages/addWant/addWant.ts b/src/pages/addWant/addWant.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ViewController } from 'ionic-angular';
+import { WantService } from '../../services/WantService';
+import { AlertService } from '../../services/AlertService';
+import { Want } from '../../domain/Want';
+
+@Component({
+	selector: 'page-add-want',
+	templateUrl: 'addWant.html'
+})
+export class AddWantPage implements OnInit {
+	private definitionWant: any;
+	private fields: Array<any>;
+	private want: Want;
+
+	constructor(private viewCtrl: ViewController,
+		private wantService: WantService,
+		private alertService: AlertService) { }
+
+	ngOnInit(): void {
+		this.wantService.describe()
+			.subscribe(
+			response => {
+				this.definitionWant = response;
+				this.fields = this.definitionWant.POST;
+			},
+			error => this.alertService.showError('Connection problem!')
+			);
+	}
+
+	onCreated(want: Want) {
+		this.want = want;
+		this.wantService.post(this.want)
+			.subscribe(
+			response => this.viewCtrl.dismiss({
+				success: true
+			}),
+			error => this.alertService.showError(error)
+			);
+	}
+
+	dismiss() {
+		this.viewCtrl.dismiss();
+	}
+}
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
@@ -18,11 +18,10 @@ export class HomePage implements OnInit {
 		private transactionService: TransactionService,
 		private alertService: AlertService) {
 		this.menuCtrl.enable(true, 'app-menu');
-		this.authService.getUserInfo.subscribe(
+		this.authService.userInfo.subscribe(
 			userInfo => {
 				this.username = userInfo.name;
 			});
-		this.authService.loadToken();
 	}
 
 	ngOnInit(): void {

diff --git a/src/pages/memberDetail/memberDetail.html b/src/pages/memberDetail/memberDetail.html
@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <h2 class="ui header">{{member.name}}</h2>
+    <h2 class="ui header">{{ (member && member.name) || '' }}</h2>
     <ion-buttons start>
       <button ion-button (click)="dismiss()">
         <span color="primary" showWhen="ios">Cancel</span>