Add editing buttons and forms

src/ContactBook/Contact.class.st

@@ -44,6 +44,13 @@ Contact >> fullname: aString [
 	fullname := aString
 ]
 
+{ #category : #'as yet unclassified' }
+Contact >> gravatarUrl [
+	^ 'http://www.gravatar.com/avatar/',
+	 (MD5 hashMessage: email asString trimBoth asLowercase) hex,
+	 '.jpg'
+]
+
 { #category : #accessing }
 Contact >> printOn: aStream [
 	aStream

src/ContactBook/TBHeaderComponent.class.st

@@ -1,23 +0,0 @@
-Class {
-	#name : #TBHeaderComponent,
-	#superclass : #WAComponent,
-	#category : #ContactBook
-}
-
-{ #category : #rendering }
-TBHeaderComponent >> renderBrandOn: html [
-	html tbsNavbarHeader: [ 
-		html tbsNavbarBrand
-			url: self application url;
-			with: 'TinyBlog'
-	]	
-]
-
-{ #category : #rendering }
-TBHeaderComponent >> renderContentOn: html [
-	html tbsNavbar beDefault; with: [ 
-		html tbsContainer: [ 
-			self renderBrandOn: html
-		]
-	]	
-]

src/ContactBook/TBScreenComponent.class.st

@@ -1,36 +0,0 @@
-Class {
-	#name : #TBScreenComponent,
-	#superclass : #WAComponent,
-	#instVars : [
-		'header'
-	],
-	#category : #ContactBook
-}
-
-{ #category : #acccessing }
-TBScreenComponent >> blog [
-	"Return the current blog. In the future we will ask the
-	session to return the blog of the currently logged in user."	
-	^ ContactBook current
-]
-
-{ #category : #acccessing }
-TBScreenComponent >> children [
-	^ { header }
-]
-
-{ #category : #initialization }
-TBScreenComponent >> createHeaderComponent [
-	^ TBHeaderComponent new
-]
-
-{ #category : #initialization }
-TBScreenComponent >> initialize [
-	super initialize.
-	header := self createHeaderComponent
-]
-
-{ #category : #acccessing }
-TBScreenComponent >> renderContentOn: html [
-	html render: header
-]

src/ContactBook/WAContact.class.st

@@ -0,0 +1,94 @@
+Class {
+	#name : #WAContact,
+	#superclass : #WAComponent,
+	#instVars : [
+		'contact'
+	],
+	#category : #ContactBook
+}
+
+{ #category : #'as yet unclassified' }
+WAContact class >> editContact: aContact [
+	^ self new
+		setContact: aContact;
+		yourself
+]
+
+{ #category : #initialization }
+WAContact >> contact [
+	^ contact
+]
+
+{ #category : #initialization }
+WAContact >> initialize [
+	super initialize.
+	contact := Contact new
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderButtonsOn: html [
+	html tbsFormGroup: [ 
+		html tbsButtonGroup: [
+			self
+				renderSubmitButtonOn: html;
+				renderCancelButtonOn: html ] ]
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderCancelButtonOn: html [
+	html tbsButton
+		beDanger;
+		cancelCallback: [ self answer: nil ];
+		with: 'Cancel'
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderContentOn: html [
+	html tbsContainer: [ 
+		html heading with: 'Contact Editing'.
+		html tbsForm with: [ 
+			self renderFieldsOn: html.
+			self renderButtonsOn: html ] ]
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderEmailFieldOn: html [
+	html tbsFormGroup: [ 
+		html label: 'Email'.
+		html emailInput
+			tbsFormControl;
+			placeholder: 'your@email.eu';
+			callback: [ :value | self contact email: value ];
+			value: (self contact email ifNil: '') ]
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderFieldsOn: html [
+	self renderFullnameFieldOn: html.
+	self renderEmailFieldOn: html
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderFullnameFieldOn: html [
+	html tbsFormGroup: [ 
+		html label: 'Fullname'.
+		html textInput
+			tbsFormControl;
+			placeholder: 'fullname';
+			callback: [ :value | self contact fullname: value ];
+			value: (self contact fullname ifNil: '') ]
+]
+
+{ #category : #'as yet unclassified' }
+WAContact >> renderSubmitButtonOn: html [
+	html tbsSubmitButton
+		beSuccess;
+		bePrimary;
+		callback: [ self answer: self contact ];
+		with: 'Save'
+]
+
+{ #category : #initialization }
+WAContact >> setContact: aContact [
+	contact := aContact
+]

src/ContactBook/WAContactBook.class.st

@@ -9,7 +9,15 @@ Class {
 
 { #category : #initialization }
 WAContactBook class >> initialize [
-	WAAdmin register: self asApplicationAt: 'contacts'.
+	(WAAdmin register: self asApplicationAt: 'contacts')
+		addLibrary: JQDeploymentLibrary;
+		addLibrary: TBSDeploymentLibrary
+]
+
+{ #category : #rendering }
+WAContactBook >> addContact [
+	(self call: WAContact new)
+		ifNotNil: [ :contact | contactBook addContact: contact ]
 ]
 
 { #category : #accessing }
@@ -27,21 +35,32 @@ WAContactBook >> contactsDo: aBlock [
 	self contacts do: aBlock
 ]
 
+{ #category : #rendering }
+WAContactBook >> renderButtonsForContact: aContact on: html [
+	html tbsButtonGroup: [
+		self
+			renderEditButtonForContact: aContact on: html;
+			renderRemoveButtonForContact: aContact on: html ]
+]
+
 { #category : #rendering }
 WAContactBook >> renderContact: aContact on: html [
 	html tableRow: [
 		html
 			tableData: aContact fullname;
-			tableData: aContact email ]
+			tableData: aContact email;
+			tableData: [ self renderPhotoOf: aContact on: html ];
+			tableData: [ self renderButtonsForContact: aContact on: html  ] ]
 ]
 
 { #category : #rendering }
 WAContactBook >> renderContactsOn: html [
-	html table: [
+	html tbsTable: [
 		html tableHead: [
 			html
 				tableHeading: 'Name';
-				tableHeading: 'Email' ].
+				tableHeading: 'Email';
+				tableHeading: 'Photo' ].
 		self contactsDo: [ :contact | self renderContact: contact on: html ] ]
 ]
 
@@ -49,10 +68,44 @@ WAContactBook >> renderContactsOn: html [
 WAContactBook >> renderContentOn: html [
 	"Main entry point of the view. Render both a title and the list of contacts."
 
-	html heading
-		level: 1;
-		with: 'My Contact Book'.
-	self renderContactsOn: html
+	html
+		tbsContainer: [ 
+	 		html heading
+				level: 1;
+				with: 'My Contact Book'.
+			html tbsForm: [
+				self renderContactsOn: html.
+				self renderGlobalButtonsOn: html ] ]
+]
+
+{ #category : #rendering }
+WAContactBook >> renderEditButtonForContact: aContact on: html [
+	html tbsButton
+		beSuccess;
+		callback: [ self call: (WAContact editContact: aContact) ];
+		with: 'Edit'
+]
+
+{ #category : #rendering }
+WAContactBook >> renderGlobalButtonsOn: html [
+	html tbsButtonGroup: [
+		html tbsButton
+			beSuccess;
+			callback: [ self addContact ];
+			with: 'New contact' ]
+]
+
+{ #category : #rendering }
+WAContactBook >> renderPhotoOf: aContact on: html [
+	html image url: aContact gravatarUrl 
+]
+
+{ #category : #rendering }
+WAContactBook >> renderRemoveButtonForContact: aContact on: html [
+	html tbsButton
+		beDanger;
+		callback: [ self contactBook removeContact: aContact ];
+		with: 'Remove'
 ]
 
 { #category : #updating }