jquery code example

custom.js

/*$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});*/

var csrf = $('meta[name=csrf-token]').attr('content');

$.ajaxSetup({
    beforeSend: function(request) {
        return request.setRequestHeader('X-CSRF-Token', csrf);
    }
});


$('.prject-name').click(function(e) {
    e.preventDefault();
    var projectid = $(this).data('project-id');
    $.ajax({
    	url: window.location.origin+'/admin/control/team-manager/'+projectid, 
    	dataType: 'html',
    	success: function(response){
      		$('#assign-user').html(response);
      }
    });
    
});

// This Is Controller for contact Model and View

var Controller={
  
  init:function(){
    Model.init();
    View.init();
  },
  
  /*Select List Item*/
  selectListItem:function(_that){
    View.selectListItemView(_that);
    return false;
  },
  
  /*Add Project Tree*/
  addProjectTreeControl:function(_that){
   let name = _that.parent().prev().find('[name="add_new_project"]').val();
   let parentId = _that.parent().prev().find('[name="parent_id"]').val() || null;
   
   if(name.length <1) return false;
   
   let data = {name:name,parent_id:parentId}
   Model.saveProjectTreeControlModel(data)
      .then(function (events) {
        console.log(events);
        if(events.status == 200){
            View.addProjectTreeView(events)
            View.closeModal();
          }
          
      });

  },
  updateProjectTreeControl:function(_that){
    let tree = $('#tree1');
    let name = _that.parent().prev().find('[name="project_tree"]').val();
    let id = _that.parent().prev().find('[name="project_tree_id"]').val();
   
   if(name.length <1) return false;
   
   let data = {name:name,id:id}
   Model.updateProjectTreeControlModel(data)
      .then(function (events) {
        if(events.status == 200){
            tree.find('.project_active').text(events.data.name);
            View.closeModal();
          }
          
      });

  },
  deleteProjectTreeControl:function(_that){
    let project_id = _that.parent('div').prev().find('[name="prject-id"]').val();
    let tree = $('#tree1');
    Model.deleteProjectTreeControlModel(project_id)
      .then(function (events) {
        if(events.status == 200){
           tree.find('.project_active').parent('li').remove();
            View.closeModal();
          }
      });
  },

  openProjectItem:function(_that){
    if(!_that.hasClass('project_active')){
      let data = _that.data('project-id');
      
      Model.openRecordItemModal(data)
      .then(function (events) {
        if(events.status == 200){
            View.renderRecordList(events.data);
          }
      });
    }
    
  },
  
  addNewRecordControl:function(_that){
   let name = _that.parent().prev().find('[name="record_name"]').val();
   let project_id = _that.parent().prev().find('[name="project_tree_id"]').val();
   
   if(name.length <1) return false;
   
   let data = {name:name,project_id:project_id}
   Model.saveRecordControlModel(data)
      .then(function (events) {
        if(events.status == 200){
            View.renderRecordList(events.data);
            View.closeModal();
          }
          
      });
  },
  
  getAssignUserController:function(_that){
    let user_id = _that.val();
    if(user_id){
      Model.getAssignUser(user_id)
      .then(function (events) {
        if(events.status == 200){
            let user = []
            $("#select").val(null).trigger('change');
            events.data.forEach(function(item){
              user.push(item.id);
            });
            $("#select").val(user).trigger('change');
          }
      });
    }else{
      $("#select").val(null).trigger('change');
    }
    
  },
  assignNewUser:function(_that){
    let project_id = _that.parent().prev().find('[name="project_id"]').val();
    let user_id = _that.parent().prev().find('[name="users[]"]').val();
    if(user_id.length <1 || !project_id) return false;
    
    let data = {user_id:user_id,project_id:project_id}
    
    Model.assignNewUserModal(data)
      .then(function (events) {
        if(events.status == 200){
            View.closeModal();
          }
      });
  },
  addNewUserController:function(_that){
    let name = _that.parent().prev().find('[name="full_name"]').val();
    let email = _that.parent().prev().find('[name="email"]').val();
    let password = _that.parent().prev().find('[name="password"]').val();
    let project_id = _that.parent().prev().find('[name="project_id"]').val();
    if(name.length <1 || email.length <1 || password.length <1 || !project_id) return false;
    let data = {
      name:name,
      email:email,
      password:password,
      project_id:project_id
    }
    Model.addNewUserModel(data)
      .then(function (events) {
        if(events.status == 200){
            View.closeModal();
          }
      });
  },
  userAssignedRecordController:function(_that){
    let user_id = _that.data('user-id');
    Model.userAssignedRecordModel(user_id)
      .then(function (events) {
        if(events.status == 200){
          _that.parent().find('.project_active').removeClass('project_active');
          _that.addClass('project_active');
           View.renderRecordList(events.data);
          }
          
      });
  }
};

// This Is Model for handle Database related issue
var Model = {
  
  init:function(){
    this.prevState = undefined;
  },
  saveProjectTreeControlModel:function(data){
     return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/create-project-tree',
            data:data,
            type: "post",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  updateProjectTreeControlModel:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/update-project-tree',
            data:data,
            type: "post",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  deleteProjectTreeControlModel:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/delete-project-tree/'+data,
            type: "get",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  
  openRecordItemModal:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/get-record-list/'+data,
            type: "get",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  saveRecordControlModel:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin +'/admin/save-record-item',
            data:data,
            type: "post",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  
  getAssignUser:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/get-assign-user/'+data,
            type: "get",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  
  assignNewUserModal:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/assign-new-user',
            data:data,
            type: "post",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  addNewUserModel:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/add-new-user',
            data:data,
            type: "post",
            success: function (data) {
                resolve(data);
            }
        });
    });
  },
  userAssignedRecordModel:function(data){
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: window.location.origin+'/admin/get-record-by-user/'+data,
            type: "get",
            success: function (data) {
                resolve(data);
            }
        });
    });
  }
  
};

// This is View for handle handle View File 

var View = {
  
  init:function(){
    
    var leftNav = $('#tree1');
    var addProjectTree = $('#addProjectTree');
    var updateProjectTree = $('#updateProjectTree');
    var deleteProjectTree = $('#deleteProjectTree');
    var addNewRecordModal = $('#addNewRecordModal');
    var managerUl = $('.manager-ul');
    var assignUser = $('#assignUser');
    var addNewUser = $('#addNewUser');
    
    var userAssignedRecord = $('#assign-user');
    
    $('#select').select2();
    
    /**
     * Handle Project Tree and Record Add,Edit and Delete Modal.
    */
    managerUl.on('click','.addProjectTree',function(e){
      e.preventDefault();
      let treeItem = leftNav.find('.project_active');
      if(treeItem.data('last-level')){
        e.stopPropagation();
      }
      addProjectTree.find('[name="add_new_project"]').val(null);
      if(treeItem.hasClass('project_active')){
        let parentId  = treeItem.attr('data-project-id');
        addProjectTree.find('[name="parent_id"]').val(parentId);
      }else{
        addProjectTree.find('[name="parent_id"]').val(null);
      }
    });
    managerUl.on('click','.updateProjectTree',function(e){
      e.preventDefault();
      let treeItem = leftNav.find('.project_active');
      let project_id  = treeItem.attr('data-project-id');
      let text = treeItem.text();
      let html = null;
      if(treeItem.hasClass('project_active')){
         html = `
        <input type="text" class="form-control fileName" name="project_tree" value="${text}" placeholder="Enter Text">
        <input type="hidden" name="project_tree_id" value="${project_id}">
        `
      }else{
         html = `<h2>Please Select list item</h2>`
      }
      updateProjectTree.find('#updateTreeField').html(html);
  
      
    });
    managerUl.on('click','.deleteProjectTree',function(e){
      
      let treeItem = leftNav.find('.project_active');
      let html = null;
      if(treeItem.hasClass('project_active')){
        let project_id = treeItem.attr('data-project-id');
          html = `
          <h2>Are you sure you want to delete file</h2>
          <input type="hidden" name="prject-id" value="${project_id}">
          `
      }else{
        html = "<h2>Please Select Item from list</h2>";
      }
      
      deleteProjectTree.find('#deleteInputItem').html(html);
      
    });
    managerUl.on('click','.addNewRecord',function(e){
      e.preventDefault();
      let treeItem = leftNav.find('.project_active');
      let project_id  = treeItem.attr('data-project-id');
      let html = null;
      if(treeItem.hasClass('project_active')){
         html = `
        <input type="text" class="form-control" name="record_name" placeholder="Enter Record Title">
        <input type="hidden" name="project_tree_id" value="${project_id}">
        `
      }else{
         html = `<h2>Please Select list item</h2>`
      }
      addNewRecordModal.find('#addNewRecord').html(html);
    });
    
    /**
     * Handle ajax request for project tree and record.
    */
    addProjectTree.on('click','.save_project_tree',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.addProjectTreeControl(_that);
    });
    updateProjectTree.on('click','.update_project_tree',function(e){
      let _that = $(this);
      Controller.updateProjectTreeControl(_that);
    });
    deleteProjectTree.on('click','.delete-project-tree',function(e){
      let _that = $(this);
      Controller.deleteProjectTreeControl(_that);
    });
    addNewRecordModal.on('click',".save-record",function(e){
        e.preventDefault();
        let _that = $(this);
        Controller.addNewRecordControl(_that);
    });
    
    /*User attach and detach*/
    
    assignUser.on('change','#project_select',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.getAssignUserController(_that);
    })
    
    assignUser.on('click','#project-team-assign',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.assignNewUser(_that);
    });
    
    addNewUser.on('click','.save_user',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.addNewUserController(_that);
    });
    
    userAssignedRecord.on('click','li',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.userAssignedRecordController(_that);
    })
    
    leftNav.on('click','.project_item',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.openProjectItem(_that);
    });
  
    leftNav.on('click','a',function(e){
      e.preventDefault();
      let _that = $(this);
      Controller.selectListItem(_that);
    });
  },
  
  activeSelectList:function(_that){
    this.prevState.removeClass('project_active');
    $('.record_id').children().removeClass('project_active');
    _that.children().addClass('project_active');
    
    return false;
  },
  
  /*Select List Item View*/
  selectListItemView:function(_that){
   
    if(!this.prevState){
      this.prevState = _that
      _that.addClass('project_active');
      _that.next().addClass('project_list_show');
    }else{
      
      let parentIndex = _that.parents('.list-of-page').index();
      let oldParentIndex = this.prevState.parents('.list-of-page').index();
      
      
    if(_that.hasClass('project_active')){
       this.prevState.removeClass('project_active');
       this.prevState.next().removeClass('project_list_show');
       
    }else{
      this.prevState.removeClass('project_active');
      
      _that.addClass('project_active');
      _that.next().addClass('project_list_show');
    }
    $('.record_id').children().removeClass('project_active');
       if(parentIndex != oldParentIndex)
         this.prevState.parents('.list-of-page').find('.project_list_show').removeClass('project_list_show');
        
      this.prevState = _that
    }
    
  },
  
  addProjectTreeView:function(events){
    let selected_tree = $('#tree1').find('.project_active');
    let level = selected_tree.parents('li').length == 4 || false 
    let html = `<li> 
                   <a href="#" class="event-page project_item" data-last-level="${level}" data-project-id ="${events.data.id}">${events.data.name}</a>
                      <ul class="project event_page project_list"></ul>
                  </li>`;
    if(selected_tree.hasClass('project_active')){
      selected_tree.next().append(html);
    }else{
      let data = `
          <li class="list-of-page">
            <i class="fa fa-circle"></i>
            <a href="#" class="prject-name project_item" data-last-level="${level}" data-project-id ="${events.data.id}">${events.data.name}</a>
            <ul class="project project_list"></ul>
        </li>
      `
      $('#tree1').append(data)
    }
    
    return null;
  },
  
  addNewList:function(_that,events){
    let html = null;
    if("title" in events){
      html = `
        <li class="branch">
          <i class="indicator glyphicon glyphicon-plus-sign"></i> 
          ${events.title}
          <span class="addNewPage  pull-right" data-page-event-id="${events.id}">add</span>
          <ul class="project"></ul>
        </li>`;
      
    }else{
      html = `<li class="record_id" data-recordid="${events.id}">${events.name}</li>`
    }
    _that.parent().parent().append(html);
     
  },
  
  closeModal:function(){
    $("#addProjectTree").modal('hide');
    $("#updateProjectTree").modal('hide');
    $("#deleteProjectTree").modal('hide');
    $("#addNewRecordModal").modal('hide');
    $("#assignUser").modal('hide');
    $("#addNewUser").modal('hide');
    return false;
  },
  
  renderRecordList:function(data){
    
    let recordListItem = $('#recordListItem');
    let items = data.map(function(item){
      return `<tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${new Date(item.created_at).toDateString("yy-mm-dd")}</td>
              </tr>`;
    });
    
    if(items.length){
      recordListItem.html(items.join())
    }else{
      recordListItem.html("<h2><center>Record Not Found</center></h2>")
    }
    
  }
  
};

Controller.init();