diff options
| -rw-r--r-- | app/assets/javascripts/notes.js | 14 | ||||
| -rw-r--r-- | app/assets/javascripts/services/notes.js | 61 | ||||
| -rw-r--r-- | app/views/home/main.html.erb | 40 | ||||
| -rw-r--r-- | app/views/layouts/application.html.erb | 4 |
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 %> |