Mentor session prepfirehose-project-mentor-session-prep-20161006

Prepare for mentor session with Andrew Clark. Refresh my memory on how
this all works and is implemented by rewriting the code, using the code
from Dany's live session as a reference.

4 files changed, 104 insertions, 15 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
new file mode 100644
index 0000000..00ccf3e
--- /dev/null
+++ b/app/assets/javascripts/notes.js
@@ -0,0 +1,14 @@
+(function(angular) {
+	angular
+		.module('nt.Notes', [
+			'nt.NotesService'
+		])
+		.controller('MainController', [
+			'$scope',
+			'NotesService',
+			function($scope, NotesService) {
+				$scope.notesService = NotesService;
+				NotesService.fetch();
+			}
+		]);
+})(window.angular);
diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js
new file mode 100644
index 0000000..87b618b
--- /dev/null
+++ b/app/assets/javascripts/services/notes.js
@@ -0,0 +1,61 @@
+(function(angular) {
+	angular
+		.module('nt.NotesService', [
+			'ngResource'
+		])
+		.service('NotesService', [
+			'$resource',
+			function($resource) {
+				var Note = $resource('/notes/:id.json',
+					{ id: '@id' },
+					{
+						update: {
+							method: 'PUT'
+						}
+					}
+				);
+
+				this.notes = null;
+				this.current_note = null;
+
+				this.fetch = function() {
+					this.notes = Note.query();
+
+					return this.notes.$promise;
+				};
+
+				this.open = function(note) {
+					this.current_note = note;
+				};
+
+				this.update = function() {
+					this.current_note.$update();
+				};
+
+				this.create = function(note_title) {
+					if (note_title) {
+						Note.save({
+							title: note_title,
+							body: ''
+						},
+						(response) => {
+							delete this.new_note_title;
+							this.show_create = false;
+							this.fetch().then(() => {
+								this.current_note = this.notes.find((el) => {
+									return el.id === response.id;
+								});
+							});
+						});
+					}
+				};
+
+				this.delete = function(note) {
+					this.notes.splice(this.notes.indexOf(note), 1);
+					note.$delete().then(() => {
+						this.current_note = null;
+					});
+				};
+			}
+		]);
+})(window.angular);
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index 990f007..46fdd35 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -3,30 +3,44 @@
 	
 	<div class="position-relative">
 		<div class="right-section">
-			<span class="display-none margin-top-neg-15">
-				<input type="text" class="form-field" />
-				<button type="button" class="button">Create</button>
-				<button type="button" class="button">Cancel</button>
+			<span class="display-inline-block margin-top-neg-15"
+				ng-show="notesService.show_create">
+				<input type="text" class="form-field"
+					ng-model="notesService.new_note_title" />
+				<button type="button" class="button"
+					ng-click="notesService.create(notesService.new_note_title)">Create</button>
+				<button type="button" class="button"
+					ng-click="notesService.show_create = false">Cancel</button>
 			</span>
 			
-			<a href="#" class="button">New</a>
+			<a href="#" class="button"
+				ng-hide="notesService.show_create"
+				ng-click="notesService.show_create = true">New</a>
 	
-			<a href="#" class="button margin-left-8">Save</a>
+			<a href="#" class="button margin-left-8"
+				ng-show="notesService.current_note"
+				ng-click="notesService.update()">Save</a>
 		</div>
 	</div>
 </div>
 
 <div class="margin-top-70">
 	<div class="sidebar position-fixed min-height-100%">
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<div ng-repeat="note in notesService.notes">
+			<a href="#" class="sidebar-link display-block padding-13"
+				ng-class="{ active: notesService.current_note === note }"
+				ng-click="notesService.open(note)"
+				ng-mouseover="display_delete_link = true"
+				ng-mouseout="display_delete_link = false"
+				ng-bind="note.title"></a>
+			<a href="#" class="delete-link"
+				ng-show="display_delete_link"
+				ng-click="notesService.delete(note)"><span>×</span></a>
+		</div>
 	</div>
 
 	<div class="note-editor">
-		<textarea class="border-none outline-none width-100% font-size-16"></textarea>
+		<textarea class="border-none outline-none width-100% font-size-16"
+			ng-model="notesService.current_note.body"></textarea>
 	</div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2b9affc..ca57c37 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html ng-app="nt.Notes">
 <head>
   <title>Notes</title>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
 </head>
-<body>
+<body ng-controller="MainController">
 
 <%= yield %>