MEAN Stack – Create Customer AngularJS Modal – Day 25

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll start to set-up our AngularJS Create Customer Modal. We’ll begin by turning our create customer view into a Modal window, and get it to popup using the ‘New Customer’ button.

We look at:
– The current create customer view
– Changing the top and bottom of the create customer view to align it with the update customer modal
– Changing our references to refer to the customer create controller
– Changing the controller alias references on the new Create Modal buttons
– Setting up the Create Customer Controller by reusing the existing create function and changing it up
– Using the code for the update customer modal directive as a template to create a new create customer modal directive.
– Adding a reference to our new Modal from the Customer List ‘Create Customer’ button
– Opening up our new Create Customer Modal

The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.

14 Comments

Let me know what you think

  • andrewmcloughln
    Reply

    hi, im stumped here, and unsure if ive missed somthing in the code:

    ‘use strict’;

    // Customers controller

    var customersApp = angular.module(‘customers’);

    customersApp.controller(‘CustomersController’, [‘$scope’, ‘$stateParams’, ‘Authentication’, ‘Customers’,’$modal’, ‘$log’,
    function($scope, $stateParams, Authentication, Customers, $modal, $log) {

    this.authentication = Authentication;
    // Find a list of Customers
    this.customers = Customers.query();

    //open a model window to create single customer record
    this.modalCreate = function (size) {

    var modalInstance = $modal.open({
    templateUrl: ‘modules/customers/views/create-customer.client.view.html’,
    controller: function ($scope, $modalInstance) {
    $scope.ok = function () {

    if(createCustomerForm.$valid){
    $modalInstance.close();
    }
    };

    $scope.cancel = function () {
    $modalInstance.dismiss(‘cancel’);
    };
    },
    size: size

    });

    modalInstance.result.then(function (selectedItem) {
    }, function () {
    $log.info(‘Modal dismissed at: ‘ + new Date());
    });
    };
    //modal end

    //open a model window to update single customer record
    this.modalUpdate = function (size, selectedCustomer) {

    var modalInstance = $modal.open({
    templateUrl: ‘modules/customers/views/edit-customer.client.view.html’,
    controller: function ($scope, $modalInstance, customer) {
    $scope.customer = customer;
    $scope.ok = function () {

    if(updateCustomerForm.$valid){
    $modalInstance.close($scope.customer);
    }

    };

    $scope.cancel = function () {
    $modalInstance.dismiss(‘cancel’);
    };
    },
    size: size
    });

    modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
    }, function () {
    $log.info(‘Modal dismissed at: ‘ + new Date());
    });
    };
    //modal end

    }
    ]);

    customersApp.controller(‘CustomersCreateController’, [‘$scope’, ‘Customers’,
    function($scope, Customers) {

    // Create new Customer
    this.create = function() {
    // Create new Customer object
    var customer = new Customers ({
    firstName: this.firstName,
    surname: this.surname,
    suburb: this.suburb,
    country: this.country,
    industry: this.industry,
    email: this.email,
    phone: this.phone,
    referred: this.phone,
    channel: this.channel,
    });

    // Redirect after save
    customer.$save(function(response) {
    // $location.path(‘customers/’ + response._id);

    // Clear form fields
    $scope.firstName = ”;
    $scope.surname = ”;
    $scope.suburb = ”;
    $scope.country = ”;
    $scope.industry = ”;
    $scope.industry = ”;
    $scope.email = ”;
    $scope.phone = ”;
    $scope.referred = ”;
    }, function(errorResponse) {
    $scope.error = errorResponse.data.message;
    });
    };

    }
    ]);

    customersApp.controller(‘CustomersUpdateController’, [‘$scope’, ‘Customers’,
    function($scope, Customers) {

    // Update existing Customer
    this.update = function(updatedCustomer) {
    var customer = updatedCustomer;

    customer.$update(function() {
    // $location.path(‘customers/’ + customer._id);
    }, function(errorResponse) {
    $scope.error = errorResponse.data.message;
    });
    };
    }

    ]);

    // created directive for customer listin
    customersApp.directive(‘customerList’, [function(){
    return {
    reestrict : ‘E’,
    transclude: true,
    templateUrl: ‘modules/customers/views/customer-list-template.html’,
    link: function(scope, element, attrs){

    }
    };
    }]);

    ever since adding the new directive, im getting a UI error (supposed ot be harmless), but my customers are not listing. (just blank)

    • bossable

      Hmm… Have another look through your code, for example, I see a spelling error with ” reestrict : ‘E’, “. Also, just stop and restart the server to make sure it picks up the directive.

  • andrewmcloughln
    Reply

    hi, first off.amazing tutorials!!!
    second, im getting the same error here after adding the modal controllers.
    error on my browser log.
    Uncaught TypeError: Cannot read property ‘getToggleElement’ of null.

    followed the tuts through twice and still getting the error (unable toi get further as its not showing my customers).

    Could this be a version issue?

  • chouchua
    Reply

    Hi, I have created the create customer modal window and the data is being updated after refresh. However, the modal window does not close when I press “save and close”.
    Here is the code I have:
    this.modalCreate = function (size) {
    var modalInstance = $modal.open({
    templateUrl: ‘modules/customers/views/create-customer.client.view.html’,
    controller: function($scope, $modalInstance){
    //remove customer from function parameters,
    // because no context of customer: $scope.customer=customer;
    $scope.ok = function () {
    if (createCustomerForm.$valid){
    $modalInstance.close();

    }
    };

    $scope.cancel = function () {
    $modalInstance.dismiss(‘cancel’);
    };
    },
    size: size
    });

    modalInstance.result.then(function (selectedItem) {
    }, function () {
    $log.info(‘Modal dismissed at: ‘ + new Date());
    });

    };
    The same problem is happening with update customer modal.
    Could the problem be calling both update() and ok() at the same time?
    Update & Close

    Thanks,
    Jimmy Chou

    • bossable

      Hey Jimmy – try this instead:
      In your view:

      ng-click="...create();ok(createCustomerForm.$valid)"
      

      In your controller:

      
      $scope.ok = function (isValid) {
      if (isValid){
      $modalInstance.close();
      }
      
      
    • Volod

      The same problem. createCustomerForm and updateCustomerForm are undefined in controllers.
      Shristi, thanks for your awesome tutorials! Will try your solution with ‘ok’ function.

  • Aditya
    Reply

    Hi , I have created the modal window for add and update customer ,but after doing this when i add/update customers the modal window is not closing . I have followed the same steps as in the tutorial , how can i fix this ?

    • bossable

      Good question, like any good investigation, we’ll need to start with the clues. The first clue would be in any error messages that might be appearing in your console.
      Are you seeing any error messages in your browsers console when you click to close the modal windows?
      Are both of your modal windows not closing?
      Is your view (modal template) calling the right controller function?
      Can you please provide the code for your modal button that you’re using to close the modal, the reference to the controller in your view, and your controller function that is being called.

    • Aditya

      HI ,
      I am calling the write function as after saving data is getting added . But whenever i save / update i see this error on my browser log.
      Uncaught TypeError: Cannot read property 'getToggleElement' of null

    • bossable

      Hey Aditya – Are you calling the function to close the modal as well?

      The error message that you see Uncaught TypeError: Cannot read property 'getToggleElement' of null is actually just a ui-bootstrap warning, it’s related to the menu dropdown.

    • Aditya

      Yes i am calling the close function as well and i am not seeing any error logs on the server. This issue started after creating the modal window for adding customer.

    • bossable

      Hey Karthik,

      Just follow the same process for showing your customers list on the customers list page. Make sure your home page controller has a reference to the Customers Service. The easiest way would be to put the controllers and the views side by side, and copy across the code items that you need.

      What have you tried so far? Are you getting any specific errors?