story: remove project

part of the refactor and extend stories

as a developer I wish to remove a project and all its tasks

learnings featured:

Steps

  1. add the delete button
  2. add delete project method
  3. refactor show confirm

add the delete button to the edit project template

Modify the ‘edit-project.html’ template to add a delete button, similar to the edit task 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>
        <div class="padding">
          <button t class="button button-block button-assertive" ng-click="deleteProject(projectIndex, project)">Delete Project</button>
        </div>
      </form>
    </ion-content>
  </div>

the delete calls deleteProject method passing parameters similar to the updateProject coded previously. Remember the scope variable projectIndex was set when the edit project modal was opened so it contains the index of the project to remove.

add the deleteProject method to ‘controllers.js’

// delete selected project
  $scope.deleteProject = function(i, project) {
    if (!$scope.activeProject || !project ) {
      return;
    }
    console.log("start deleting");
    $scope.showConfirm('Delete Project', 'Are you sure you want to delete this project?',function() {
      console.log("confirmed to delete project and all its tasks "+i);
      $scope.projects.splice(i,1);
      Projects.save($scope.projects);
    });
  }

Adding this method I wanted to reuse the showConfirm dialog but I had to refactot it to pass in the title and message I want since it was hard coded to deleting a task.

refactor show confirm

So showConfirm method in ‘controllers.js’ is changed to

// A confirm dialog
  $scope.showConfirm = function(title, message, onYes, onNo) {
   var confirmPopup = $ionicPopup.confirm({
     title: title,
     template: message
   });
   confirmPopup.then(function(res) {
     if(res) {
       onYes();
     } else {
       if (onNo)
        onNo();
     }
   });
  };

And then I had to update the deleteTask method that also calls show confirm to now pass in title and mesasge:

// delete selected task
  $scope.deleteTask = function(i, task) {
    if (!$scope.activeProject || !task ) {
      return;
    }
    console.log("start deleting");
    $scope.showConfirm('Delete Task', 'Are you sure you want to delete this task?', function() {
      console.log("confirmed to delete task "+i);
      $scope.activeProject.tasks.splice(i,1);
      Projects.save($scope.projects);
    });
  }

the code for this can be found on my github page

next article in series