From 1d6fa22853b724025461aca3d8b7b939c9fc2dba Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Thu, 6 Oct 2016 18:38:14 -0400
Subject: Mentor session prep

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.
---
 app/assets/javascripts/notes.js          | 14 ++++++++
 app/assets/javascripts/services/notes.js | 61 ++++++++++++++++++++++++++++++++
 app/views/home/main.html.erb             | 40 ++++++++++++++-------
 app/views/layouts/application.html.erb   |  4 +--
 4 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/notes.js
 create mode 100644 app/assets/javascripts/services/notes.js

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 %>
 
-- 
cgit v1.2.3