story: rename project

part of the refactor and extend stories

as a user I wish to rename a project

I will allow the project to be renamed by adding a edit icon to the right of the projects list similar to the todo tasks.

learnings featured:

Steps

  1. add edit project template
  2. modify the todo list template to show the edit button
  3. load the new template
  4. open and close the modal
  5. save the updated project

add a template ‘edit-project.html’

this template is similar to the edit-tasks template

<div class="modal">
    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Edit Project</h1>
      <button class="button button-clear button-positive" ng-click="closeEditProject()">Cancel</button>
    </ion-header-bar>
    <!-- Modal content area -->
    <ion-content>
      <form ng-submit="updateProject(projectIndex, project)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What is the name of the project?" ng-model="project.title">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Update Project</button>
        </div>
      </form>
    </ion-content>
  </div>

modify the list of projects

modify ‘todo-list.html’ with the following changes:

  • modify the list of projects to render an edit icon to the right using the classes ‘item item-icon-right’
  • move the ng-click event from the <ion-item> directive to a <span;> tag wrapping the project title
  • add an <i> tag and an ng-click to call the editProject method, passing in the $index and the project variable available within the ng-repeat
...
    <ion-item class="item item-icon-right" ng-repeat="project in projects"  ng-class="{active: activeProject == project}">
      <span ng-click="selectProject(project, $index)">{{project.title}}</span>
      <i class="icon ion-edit" ng-click="editProject($index, project)"></i>
    </ion-item>
...

load the new template

in the ‘controllers.js’ load the template into a scope variable

add after the other modal templates are loaded

...
 // Edit and load the Modal for edit project
  $ionicModal.fromTemplateUrl('templates/edit-project.html', function(modal) {
    $scope.editProjectModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
...

open and close the modal

in the ‘controllers.js’ add methods editProject to open the modal and closeProject to close the modal

...
  // Open our new task modal
  $scope.editProject = function(i, project) {
    $scope.project = {title: $scope.projects[i].title, tasks: $scope.projects[i].tasks};
    $scope.projectIndex = i;
    $scope.editProjectModal.show();
  };
...
  // Close the edit task modal
  $scope.closeEditProject = function() {
    $scope.editProjectModal.hide();
  };
...

save the updated project

in the ‘controllers.js’ add the method updateProject to save the updated project

...
  // Called when the form is submitted
  $scope.updateProject = function(i, project) {
    if (!$scope.projects || !project) {
      return;
    }
    $scope.projects[i] = project;
    $scope.editProjectModal.hide();

    // Inefficient, but save all the projects
    Projects.save($scope.projects);

  };
...

the code for this can be found on my github page

next article in series