insaineyesay
3/8/2017 - 2:11 PM

menuController.js

'use strict';

angular.module('adminApp')
  .controller('MenuController',
    function ($rootScope,
              $resource,
              $scope,
              $log,
              MenuService,
              menuItems,
              UserService,
              DTOptionsBuilder,
              DTColumnDefBuilder) {

      var self = this,
        nEditing = null;
      var table = $('#sample_editable_1');
      var oTable = {};
      // $scope.$on('$viewContentLoaded', function () {
      //   // initialize core components
      //   App.initAjax();
      // });
      self.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');

      // This matches the number of columns in the data table
      self.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3),
        DTColumnDefBuilder.newColumnDef(4),
        DTColumnDefBuilder.newColumnDef(5),
        DTColumnDefBuilder.newColumnDef(6).notSortable()
      ];

      // assign controller methods to variables on the controller scope
      self.menuItemToAdd = _buildmenuItemToAdd(1);
      self.addItem = addItem;
      self.modifyItem = modifyItem;
      self.removeItem = removeItem;

      // create starter item to add in the fields.
      // TODO: This needs to be cleaned up for production
      function _buildmenuItemToAdd(menuItem) {
        return {
          title: menuItem.title,
          description: menuItem.description,
          short_description: menuItem.short_description,
          image_url: menuItem.image_url,
          category: menuItem.category,
          price: menuItem.price
        };
      }

      /**
       * @name MenuController#menuItemSync
       * @description Writes transaction to the menu item service
       * @returns {bool} True or false in relation to transaction success
       */
      function menuItemSync() {
        MenuService.menuItemSync(menuItem).then(function (response) {
          if (response.success) {
            // some modal service - show successful transaction meessage
          } else {
            // some modal service - show unsuccessful transaction message
          }
        })
      }

      /**
       * @name MenuController#addItem
       * @description Adds a new item to the collection of menu items in the table.
       */
      function addItem() {
        self.menuItems.push(angular.copy(self.menuItemToAdd));
        self.newMenuItem = _buildmenuItemToAdd(self.menuItemToAdd);
        MenuService.upsertVendorItem(self.newMenuItem);
      }

      function saveRow(oTable, nRow) {
        // var jqInputs = $('td: input', nRow);
        var jqInputs = [];
        _.forEach($('td:input', nRow).context.children, function (v) {
          if (!_.isArray(v)) {
            jqInputs.push(v.firstChild);
          }
        });
        console.log(jqInputs);
        var newMenuItem = {
          id: jqInputs[0].value,
          title: jqInputs[1].value,
          image_url: jqInputs[2].value,
          short_description: jqInputs[3].value,
          description: jqInputs[4].value,
          price: jqInputs[5].value,
          category: jqInputs[6].value
        };

        console.log(newMenuItem, 'newMenuItem');
        // oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
        // oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
        // oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
        // oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
        // oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
        // oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
        // oTable.fnUpdate(jqInputs[6].value, nRow, 6, false);
        // oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 7, false);
        // oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 8, false);
        // oTable.fnDraw();
        MenuService.editMenuItem(newMenuItem);
      }

      function editRow(oTable, nRow) {

        var cellContentArray = [];
        _.forEach(nRow.cells, function (key, val) {
          if (angular.isString(key.innerHTML)) {
            cellContentArray.push(key.innerHTML);
          }
        });
        // var aData = oTable.fnGetData(nRow);
        var aData = cellContentArray;
        var jqTds = $('>td', nRow);
        // var aData = oTable.fnGetData(nRow);
        // var jqTds = $('>td', nRow);

        console.log(aData, 'things');
        jqTds[0].innerHTML = '<input disabled type="text" class="form-control input-small" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
        jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
        jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
        jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
        jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
        jqTds[7].innerHTML = '<a class="edit" href="">Save</a>';
        jqTds[8].innerHTML = '<a class="cancel" href="">Cancel</a>';
      }

      /**
       * @name MenuController#modifyItem
       * @description Modifies menu items in the table
       */
      function modifyItem(menuItem) {
        console.log(menuItem, 'menuItem');
        // self.menuItems.splice(index, 1, angular.copy(self.menuItemToAdd));
        // self.menuItemToAdd = _buildmenuItemToAdd(self.menuItemToAdd.id + 1);
      }
        table.on('click', '.edit', function (menuItem) {
          console.log(menuItem, 'fdafdfds');
          // e.preventDefault();
          var nRow = $(this).parents('tr')[0];

          if (nEditing !== null && nEditing != nRow) {
            /* Currently editing - but not this row - restore the old before continuing to edit mode */
            restoreRow(oTable, nEditing);
            editRow(oTable, nRow);
            nEditing = nRow;
          } else if (nEditing == nRow && this.innerHTML == "Save") {
            /* Editing this row and want to save it */
            saveRow(oTable, nEditing);
            nEditing = null;
            // alert("Updated! Do not forget to do some ajax to sync with backend :)");
          } else {
            /* No edit in progress - let's start one */
            editRow(oTable, nRow);
            nEditing = nRow;
          }
          console.log('nRow', nRow);
        });


      function restoreRow(oTable, nRow) {
        var cellContentArray = [];
        _.forEach(nRow.cells, function (key, val) {
          if (angular.isString(key.innerHTML)) {
            cellContentArray.push(key.innerHTML);
          }
        });
        // var aData = oTable.fnGetData(nRow);
        var aData = cellContentArray;
        var jqTds = $('>td', nRow);

        for (var i = 0, iLen = jqTds.length; i < iLen - 2; i++) {
          // oTable.fnUpdate(aData[i], nRow, i, false);
          console.log(jqTds[i]);
          jqTds[i].innerHTML = '<td>' + $(jqTds[i]).context.firstChild.value + '</td>';
        }

        jqTds[7].innerHTML = '<a class="edit" href="">Edit</a>';
        jqTds[8].innerHTML = '<a class="edit" href="">Delete</a>';
        oTable.fnDraw();
      }


      /**
       * @name MenuController#removeItem
       * @description Adds a new item to the collection of menu items in the table.
       */
      function removeItem(index) {
        self.menuItems.splice(index, 1);
      }


      self.init = function () {
        MenuService.getAllItems().then(function (data) {
          self.menuItems = data.menuItems;
        });

        console.log(self.menuItems, 'self.menuItems');
      };



      self.init();
      // set sidebar closed and body solid layout mode
      $rootScope.settings.layout.pageContentWhite = true;
      $rootScope.settings.layout.pageBodySolid = false;
      $rootScope.settings.layout.pageSidebarClosed = true;
    });