Dropdown Menu Added that adds new todos to the database

Question

I can't find any good documentation to figure out how to do a dropdown menu that continuously adds new items to the database. I'd like to be able to add new todos, save them, and have a dropdown appear when I edit each todo that shows all the todos I have typed in on each line I edited that I can either click on and chose or add a new one. Does anyone know how to make this happen? I would love to know how this is done to improve the app. Thanks in advance

Answer 1 · 2017-11-16T00:38:33Z

November 16, 2017 12:38am

Susan,

I'd love to help, but I'm not sure if I completely understand how you want to incorporate a drop down list into the design of the application. When editing a todo, what would display in the drop down list?

Thanks ~James

Answer 2 · 2017-12-09T16:05:27Z

December 9, 2017 4:05pm

Susan,

Sorry for the delay between my responses.

I've cloned your repo and got the app up and running locally. I'm still trying to understand the data relationship between subjects and activities.

Let's take a look at the subject "ART". In your seed data, you list a single activity: "Painting".

var Plans = [
    {"name": "MUSIC", "plan": "A Peanut Sitting On A Railroad Track"},
    {"name": "ART", "plan": "Painting"},
    {"name": "STORIES", "plan": "Where The Wild Things Are"},
    {"name": "FINE MOTOR ACTIVITIES", "plan": "Blocks"},
    {"name": "GROSS MOTOR ACTIVITIES", "plan": "Dancing"},  
];

Is the intention that the user could define one or more activities per subject? Or will a subject only have a single activity?

Thanks ~James

Answer 3 · 2019-09-06T15:06:17Z

September 6, 2019 3:06pm

These were the changes I needed to make. I got help from a Code Louisville mentor and was able to finish my project that I was working on. Sorry it took so long to post.

controllers/main.js

use strict';

function MainCtrl($scope, dataService) {
  dataService.getPlans(function(response) {
    var plans = response.data.plans;
    $scope.plans = plans;
  });

  // remove plan
 $scope.removePlan = function(index) {
  var plan = $scope.plans[index];
  dataService.deletePlan(plan).then(() => {
    $scope.plans.splice(index, 1);
    console.log('successfully deleted plan');
  });
};

  // add new plan
  $scope.addPlan = function() {
    // line 43 of index.html drives whether or not the form is shown when you add a new plan, but what
    // it's referencing (inserted) didn't exist. I added it here and now the edit form shows when you
    // add a new plan
    $scope.inserted = {
      name: '',
      plans: [],
      selectedPlanIndex: 0,
      completed: false
    };

    $scope.plans.unshift($scope.inserted);
  };

  $scope.addPlanToSubject = function(planName, subject) {
    if (!subject.plans) subject.plans = [];
    subject.plans.push(planName);
    subject.selectedPlanIndex = subject.plans.indexOf(planName);
    document.querySelectorAll('#new-sub-plan').forEach(el => (el.value = null));
  };

  // this didn't exist yet. It will call savePlans whenever you click a save button on one of the rows
  $scope.savePlan = function(data, id) {
    dataService.savePlans($scope.plans);
  };
}
module.exports = MainCtrl;

controllers/plan.js

use strict';

function PlanCtrl($scope, dataService) {



  $scope.deletePlan = function (plan, index) {

    dataService.deletePlan(plan).then(function () {

      $scope.plans.splice(index, 1);

    });

  };



  $scope.savePlans = function () {

    var filteredPlans = $scope.plans.filter(function (plan) {

      if (plan.edited) {

        return plan

      };

    })

    dataService.savePlans(filteredPlans)

      .finally($scope.resetPlanState());

  };



  $scope.resetPlanState = function () {

    $scope.plans.forEach(function (plan) {

      plan.edited = false;

    });

  }

}



module.exports = PlanCtrl;

scripts/services/data.

'use strict';

function DataService ($http, $q) {

  this.getPlans = function(cb) {
    $http.get('/api/plans').then(cb);
  };
this.deletePlan = function(plan) {
    if (!plan._id) {
        return $q.resolve();
    }
    return $http.delete('/api/plans/' + plan._id).then(function () {
        console.log("I deleted the " + plan.name + " plan"); 
    });
};

  this.savePlans = function(plans) {
    var queue = [];
    plans.forEach(function(plan) {
      var request;
      if(!plan._id) {
        request = $http.post('/api/plans', plan)
      } else {
        request = $http.put('/api/plans/' + plan._id, plan).then(function(result) {
          plan = result.data.plan;
          return plan;
        })
      };
      queue.push(request);
    });
    return $q.all(queue).then(function(results) {
      console.log("I saved " + plans.length + " plans!");
    });
  };
}

module.exports = DataService;```

app/app.js

'use strict';



var angular = require('angular');



var app = angular.module('lessonPlanApp', ["xeditable"]);

app.run(['editableOptions', function(editableOptions) {

    editableOptions.theme = 'bs3';

}]);



require('./scripts/services');

require('./scripts/directives');

require('./scripts/controllers');

public/index.html

<html lang="en">



<head>

  <title></title>

  <meta charset="windows-1252">

  <meta charset="viewport" content="width=device-width, initial scale=1.0">

  <link rel="stylesheet" href="/style/style.css" type="text/css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

    crossorigin="anonymous">



</head>



<body>

  <div ng-app="lessonPlanApp" ng-controller="MainCtrl">

    <h1>LESSON PLAN</h1>

    <table class="table table-hover table-condensed table-striped table-bordered">

      <thead>

        <tr>

          <th>Subject</th>

          <th>Plan</th>

          <th>Actions</th>

        </tr>

      </thead>

      <tbody>

        <tr ng-repeat="plan in plans">

          <td>

            <span editable-text="plan.name" e-name="name" e-form="rowform">

              {{ plan.name || 'empty' }}

            </span>

          </td>

          <td>

            <!--  editable-select gives you a dropdown to select a subplan. The input beneath it will allow you to
                  insert a new plan into the plan's subplans -->

            <span editable-select="plan.selectedPlanIndex" e-name="selectedPlan" e-form="rowform" e-ng-options="index as p for (index, p) in plan.plans">

              <!--  the selectedPlanIndex indicates which subplan is currently selected -->

              {{ plan.plans[plan.selectedPlanIndex] }}

            </span>

            <input type="text" ng-show="rowform.$visible" ng-model="newSubPlan" id="new-sub-plan">

            <button ng-show="rowform.$visible" ng-click="addPlanToSubject(newSubPlan, plan)">Add</button>

          </td>

          <td style="white-space: nowrap">

            <form id="plan" editable-form name="rowform" onbeforesave="savePlan($data, plan._id)" ng-show="rowform.$visible" class="form-buttons form-inline"

              shown="inserted == plan">

              <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">

                save

              </button>

              <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">

                cancel

              </button>

            </form>

            <div class="buttons" ng-show="!rowform.$visible">

              <button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>

              <button type="button" class="btn btn-danger" ng-click="removePlan($index)">del</button>

            </div>

          </td>

        </tr>

      </tbody>

    </table>

    <button type="button " class="btn btn-default" ng-click="addPlan() ">Add row</button>

  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <script src="/scripts/vendor.bundle.js"></script>

  <script src="/scripts/plan.bundle.js"></script>

  <script>
    function insertValue() {
      var select = document.getElementById("select"),
        txtVal = document.getElementById("val").value,
        newOption = document.createElement("OPTION"),
        newOptionVal = document.createTextNode(txtVal);
      newOption.appendChild(newOptionVal);
      select.insertBefore(newOption, select.firstChild);
    }
  </script>

  <script>
    $(document).ready(function () {
      $('<option value="option"></option>').appendTo("#ddList");
    });
  </script>



  <script>
    $(document).ready(function () {
      $("#select").click(function () {
        $("id").hide();
      });
      $("#select").click(function () {
        $("id").show();
      });
    });
  </script>

</body>



</html>

public/mock/plans.json

[ 
    {"MUSIC"; "A Peanut Sitting On A Railroad Track"}    
]

[
    {"ART"; "Painting"}
]

[  
    {"STORIES"; "Where The Wild Things Are"}
]

[
    {"FINE MOTOR ACTIVITIES"; "Blocks"}
]

[
    {"GROSS MOTOR ACTIVITIES"; "Dancing"}
]

Welcome to the Treehouse Community

Looking to learn something new?

Susan Rusie

Susan Rusie

Dropdown Menu Added that adds new todos to the database

3 Answers

James Churchill

James Churchill

Susan Rusie

Susan Rusie

Susan Rusie

Susan Rusie

James Churchill

James Churchill

Susan Rusie

Susan Rusie

Susan Rusie

Susan Rusie

James Churchill

James Churchill

Susan Rusie

Susan Rusie

Susan Rusie

Susan Rusie