Worked on Project edit and create view. Ran into a bug rails/rails#8832

modified: app/assets/javascripts/angular/controllers/projects.js modified: app/assets/javascripts/app.js -- removed 'new' path in favour of 'new' as a routeparameter modified: app/assets/stylesheets/_login_control.css.scss modified: app/assets/templates/project_details.html modified: app/assets/templates/projects_list.html modified: app/controllers/projects_controller.rb modified: app/views/layouts/application.html.erb -- added comming soon header modified: lib/RestFailureApp.rb -- added check for json content type.
QutEcoacoustics · Jan 10, 2013 · 3dcd83b · 3dcd83b
1 parent 254f1f1
commit 3dcd83b
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 103 deletions.
diff --git a/app/assets/javascripts/angular/controllers/projects.js b/app/assets/javascripts/angular/controllers/projects.js
@@ -5,27 +5,59 @@ function ProjectsCtrl($scope, $resource, Project) {
     $scope.projects = $scope.projectsResource.query();
 
     $scope.links = function(key) {
-        return ProjectsCtrl.linkList(this.project.id)[key];
+        return ProjectsCtrl.linkList(null)[key];
     };
 }
 
 ProjectsCtrl.linkList = function (id) {
     return {
         edit: '/projects/' + id + '/edit',
-        details: '/projects/' + id
+        details: '/projects/' + id,
+        new: '/projects/new',
+        list: '/projects'
     };
 };
 
 ProjectsCtrl.$inject = ['$scope', '$resource', 'Project'];
 
 function ProjectCtrl($scope, $location, $resource, $routeParams, Project, Site, Photo) {
 
+    var self = this;
+
     var projectResource = Project; //$resource('/projects/:projectId', {projectId: $routeParams.projectId});
     var routeArgs = {projectId: $routeParams.projectId};
 
+    this.populateProject = function(){
+        var p = { "project": {} };
+
+        p.project.name = $scope.project.name;
+        p.project.urn = $scope.project.urn;
+        p.project.description = $scope.project.description;
+        p.project.notes = $scope.project.notes || {};
+
+        p.project.siteIds = $scope.siteIds || [];
+
+        p.project.photos_attributes = [];
+        for(var photoindex=0;photoindex<$scope.project.photos.length;photoindex++){
+            p.project.photos_attributes[photoindex] = {};
+            p.project.photos_attributes[photoindex].uri = $scope.project.photos[photoindex].uri;
+            p.project.photos_attributes[photoindex].description = $scope.project.photos[photoindex].description;
+            p.project.photos_attributes[photoindex].copyright = $scope.project.photos[photoindex].copyright;
+            p.project.photos_attributes[photoindex].id = $scope.project.photos[photoindex].id;
+        }
+
+        return p;
+    };
+
     $scope.siteIds = [];
 
-    $scope.editing = $routeParams.editing === "edit";
+    $scope.isEditing = $routeParams.editing === "edit";
+
+    $scope.isCreating = $routeParams.projectId === 'new';
+
+    $scope.isCreatingOrEditing = $scope.isEditing || $scope.isCreating;
+
+    $scope.isShowing = !$scope.isCreatingOrEditing;
 
 //    $scope.editMode = function(mode){
 //        if(mode){
@@ -71,49 +103,39 @@ function ProjectCtrl($scope, $location, $resource, $routeParams, Project, Site,
         }
     };
 
-    $scope.deletePhoto = function(photoId){
-        var doit = confirm("Are you sure you want to delete this photo (id {0})?".format(photoId));
-        if (doit) {
+    $scope.deletePhoto = function(photoToDelete){
+        console.log('deletePhoto',photoToDelete);
+        var doit = confirm("Are you sure you want to delete this photo from uri {0} ?".format(photoToDelete.uri));
 
-            for(var remPhotoIndex = 0;remPhotoIndex<this.project.photos.length;remPhotoIndex++){
-                if(this.project.photos[remPhotoIndex].id === photoId){
-                    // remove the element
-                    this.project.photos.splice(remPhotoIndex, 1);
-                    break;
-                }
+        if (doit) {
+            var index = $scope.project.photos.indexOf(photoToDelete);
+            if(index > -1){
+                var removedPhoto = $scope.project.photos.splice(index, 1);
             }
         }
     };
 
+    $scope.addPhoto = function addPhoto(newPhoto){
+        console.log('addPhoto',newPhoto);
+        if(newPhoto){
+            $scope.project.photos.push(newPhoto);
+        }
+    };
+
+
     $scope.reset = function() {
-        if($scope.editing){
+        if($scope.isEditing){
             $scope.project = angular.copy($scope.original);
         }
     };
 
     $scope.update = function updateProject() {
-        if($scope.editing){
-            // do not send back the full object for update
-            var p = { "project": {} };
-
-            p.project.name = $scope.project.name;
-            p.project.urn = $scope.project.urn;
-            p.project.description = $scope.project.description;
-            p.project.notes = $scope.project.notes;
-
-            p.project.siteIds = $scope.siteIds;
-
-            p.project.photos_attributes = [];
-            for(var photoindex=0;photoindex<$scope.project.photos.length;photoindex++){
-                p.project.photos_attributes[photoindex] = {};
-                p.project.photos_attributes[photoindex].uri = $scope.project.photos[photoindex].uri;
-                p.project.photos_attributes[photoindex].description = $scope.project.photos[photoindex].description;
-                p.project.photos_attributes[photoindex].copyright = $scope.project.photos[photoindex].copyright;
-                p.project.photos_attributes[photoindex].id = $scope.project.photos[photoindex].id;
-            }
+        if($scope.isEditing){
+
+            var p = self.populateProject();
 
             projectResource.update(routeArgs, p,  function() {
-                $scope.original = angular.copy($scope.site);
+                $scope.original = angular.copy($scope.project);
                 var msg = "Project details updated successfully.";
                 console.log(msg); alert(msg);
             }, function() {
@@ -123,6 +145,23 @@ function ProjectCtrl($scope, $location, $resource, $routeParams, Project, Site,
         }
     };
 
+    $scope.create = function createProject() {
+        if($scope.isCreating){
+            var p = self.populateProject();
+
+            console.log(p);
+
+            projectResource.save({}, p,  function() {
+                $scope.original = angular.copy($scope.project);
+                var msg = "Project created successfully.";
+                console.log(msg); alert(msg);
+            }, function() {
+                var msg = "There was a problem creating the project. Please check for errors and try again.";
+                console.log(msg); alert(msg);
+            });
+        }
+    };
+
     $scope.allSites = Site.query();
 }
 

diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -33,7 +33,7 @@ var bawApp = (function (undefined) {
         var pathList = "/" + resourceName;
         var pathShow = pathList + "/" + id;
         var pathEdit = pathShow + "/:editing";
-        var pathNew = pathList + '/new';
+        //var pathNew = pathList + '/new';
 
         // assets
         var assetList = "/assets/" + resourceName + "_list.html";
@@ -47,7 +47,7 @@ var bawApp = (function (undefined) {
             //    this.when(listPath, {templateUrl: assetManage, controller: controllerMany})
             //})
             // create
-            .when(pathNew, {templateUrl: assetDetails, controller: controllerOne})
+            //.when(pathNew, {templateUrl: assetDetails, controller: controllerOne})
             // edit
             .when(pathEdit, {templateUrl: assetDetails, controller: controllerOne})
             // details

diff --git a/app/assets/stylesheets/_login_control.css.scss b/app/assets/stylesheets/_login_control.css.scss
@@ -61,7 +61,6 @@ body.waiting-for-angular div#initializing-panel {
   width: 310px;
   text-align: center;
 
-
   & ul {
     margin: 0 0 0 -110px;
     padding: 0;

diff --git a/app/assets/templates/project_details.html b/app/assets/templates/project_details.html
@@ -1,15 +1,13 @@
 <div id="content" data-ng-controller="ProjectCtrl">
     <h2>Project</h2>
 
-    <p>{{editing | boolToWords:'Editing project.':'The details for a project.'}}</p>
+    <p ng-show="isShowing">The details for a project.</p>
+    <p ng-show="isCreating">Creating a new project.</p>
+    <p ng-show="isEditing">Editing project.</p>
 
     <a href="/projects">Projects</a>
 
-    <p>
-        <a ng-hide="editing" ng-href="{{links.edit}}">edit</a>
-    </p>
-
-    <div ng-hide="editing">
+    <div ng-show="isShowing">
         <h3 title="{{project.urn}}">{{project.name}}</h3>
         <p ng-bind="project.description" ></p>
         <pre>{{project.notes}}</pre>
@@ -27,7 +25,7 @@ <h4>Images</h4>
         </a>
     </div>
 
-    <div ng-show="editing">
+    <div ng-show="isCreatingOrEditing">
         <form id="project_edit_form" novalidate>
             <label>
                 <span>Name</span>
@@ -54,43 +52,61 @@ <h3>Sites</h3>
                 </select>
             </label>
             <h3>Photos</h3>
-            <ul>
-            <li ng-repeat="photo in project.photos">
-                <a href ng-click="deletePhoto()">remove</a>
+            <table>
+                <thead>
+                <tr>
+                    <th></th>
+                    <th>Uri</th>
+                    <th>Copyright</th>
+                    <th>Description</th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tfoot>
+                <tr>
+                    <td><img ng-src="{{photo.uri}}" style="max-width:50px; max-height:50px;" /></td>
+                    <td><input type="url" ng-model="photo.uri" maxlength="1500" width="800px;"></td>
+                    <td><textarea spellcheck ng-model="photo.description"></textarea></td>
+                    <td><textarea spellcheck ng-model="photo.copyright"></textarea></td>
+                    <td><button ng-click="addPhoto(photo)">Add</button></td>
+                </tr>
+                </tfoot>
+                <tbody>
+                <tr  ng-repeat="photo in project.photos">
+                    <td><img ng-src="{{photo.uri}}" style="max-width:50px; max-height:50px;" /></td>
+                    <td><input type="url" ng-model="photo.uri" maxlength="1500"  width="800px;"></td>
+                    <td><textarea spellcheck ng-model="photo.description"></textarea></td>
+                    <td><textarea spellcheck ng-model="photo.copyright"></textarea></td>
+                    <td> <button ng-click="deletePhoto(photo)">Remove</button></td>
+                </tr>
+                </tbody>
+            </table>
+
+                <h3>New Photo</h3>
                 <label>
                     <span>Photo uri</span>
-                    <input type="text" ng-model="photo.uri" maxlength="1500">
+                    <input type="text" ng-model="project.photos[project.photos.length].uri" maxlength="1500">
                 </label>
                 <label>
                     <span>Photo description</span>
-                    <input type="text" ng-model="photo.description" maxlength="5000">
+                    <input type="text" ng-model="project.photos[project.photos.length].description" maxlength="5000">
                 </label>
                 <label>
                     <span>Photo copyright</span>
-                    <input type="text" ng-model="photo.copyright" maxlength="500">
+                    <input type="text" ng-model="project.photos[project.photos.length].copyright" maxlength="500">
                 </label>
-            </li>
-            </ul>
-
-            <h3>New Photo</h3>
-            <label>
-                <span>Photo uri</span>
-                <input type="text" ng-model="project.photos[project.photos.length].uri" maxlength="1500">
-            </label>
-            <label>
-                <span>Photo description</span>
-                <input type="text" ng-model="project.photos[project.photos.length].description" maxlength="5000">
-            </label>
-            <label>
-                <span>Photo copyright</span>
-                <input type="text" ng-model="project.photos[project.photos.length].copyright" maxlength="500">
-            </label>
 
-            <br><br>
-            <button ng-click="update(project)">Save</button>
-            <button ng-click="reset()">Reset</button>
-            <button ><a ng-href="{{links.details}}">Cancel</a></button>
-            <button ng-click="delete()" >Delete</button>
+                <br><br>
+                <div ng-show="isEditing">
+                    <button ng-click="update(project)">Save</button>
+                    <button ng-click="reset()">Reset</button>
+                    <button ><a ng-href="{{links.details}}">Cancel</a></button>
+                    <button ng-click="delete()" >Delete</button>
+                </div>
+                <div ng-show="isCreating">
+                    <button ng-click="create(project)">Save</button>
+                    <button ><a ng-href="{{links.list}}">Cancel</a></button>
+                </div>
         </form>
     </div>
 

diff --git a/app/assets/templates/projects_list.html b/app/assets/templates/projects_list.html
@@ -3,7 +3,7 @@ <h2>Projects</h2>
 
     <p>Projects are a collection of sites that have a common goal.</p>
 
-    <p><a href="/projects/new">new Project</a></p>
+    <p><a ng-href="{{links('new')}}">New project</a></p>
 
     <ul class="item-list">
         <li ng-repeat="project in projects">

diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
@@ -25,7 +25,8 @@ def show
   # GET /projects/new.json
   def new
     @project = Project.new
-    @project.sites.build
+    #@project.sites.build
+    #@project.photos.build
     #@all_sites = Site.all
 
     respond_to do |format|