External-lists/resources/views/Admin/uredjaj/attach_index.blade.php

<style type="text/css">
	.card-header {
		background-color: rgba(0,0,0,.03);
	}
  .card-header, .card-body {
    padding: 0.6rem;
  }
  #uAttach .fa {
    color: green;
  }
  .bg-uredjaj-edit {
    background-color: #a0eb7a;
  }
</style>
<div id="uAttach" data-id="{{ $id }}" data-type="{{ $type }}" class="row">
</div>
<script>
  $(document).ready(function() {
    getAttachForm();
  });

  function getAttachForm() {
    $("#uAttach").empty();
    var formData = [];
    formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
    formData.push({name:'uredjaj_parent_type', value: $("#uAttach").data('type') });
    formData.push({name:'_token', value: '{{ csrf_token() }}'});
    $("#uAttach").load('/admin/uredjaj/getAttached', formData, function() {
      $(this).find(".addUredjaj").click(function (e) {
        loadEditFrom($(this));
        return false;
      });
      $(this).find(".linkUredjaj").click(function (e) {
        loadLinkFrom($(this));
        return false;
      });
      $(this).find(".editUredjaj").click(function (e) {
        loadEditFrom($(this));
        return false;
      });
      $(this).find(".deleteUredjaj").click(function (e) {
        var popOpts={
          placement: 'left',
          title: 'Delete ?',
          html: true,
          trigger: 'focus',
          content: '<a class="btn btn-xs btn-danger decline" href="javascript:void(0)"><i class="fas fa-times"></i> Ne</a>&nbsp;<a class="btn btn-xs btn-success pull-right popover-confirm" href="javascript:void(0)"><i class="fas fa-check"></i> Da</a>',
        }
        $(e.currentTarget).popover(popOpts).popover('show').on('shown.bs.popover', function(e) {
          var pdelete=$(this);
          var pop=$(".popover");
          var btn = $(this);
          var popButtons=pop.find('a').click(function(){
            if($(this).is('.popover-confirm')){
              var formData = [];
              formData.push({name:'_token', value: '{{ csrf_token() }}'});
              formData.push({name:'uredjaj_id', value: btn.data('id') });
              formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
              blockElement($(this).parents('.card'));
              $.ajax({
                  url: '/admin/uredjaj/attachDelete',
                  dataType: "json",
                  data: formData,
                  type: "POST",
                  cache: false,
                  success: function (response) {
                    getAttachForm();
                  },
                  error: function (response) {
                  }
              });
            }
            pdelete.popover('dispose');
          }); 
        });
        return false;
      });
      $(this).find(".unLinkUredjaj").click(function (e) {
        var popOpts={
          placement: 'left',
          title: 'Unlink ?',
          html: true,
          trigger: 'focus',
          content: '<a class="btn btn-xs btn-danger decline" href="javascript:void(0)"><i class="fas fa-times"></i> Ne</a>&nbsp;<a class="btn btn-xs btn-success pull-right popover-confirm" href="javascript:void(0)"><i class="fas fa-check"></i> Da</a>',
        }
        $(e.currentTarget).popover(popOpts).popover('show').on('shown.bs.popover', function(e) {
          var pdelete=$(this);
          var pop=$(".popover");
          var btn = $(this);
          var popButtons=pop.find('a').click(function(){
            if($(this).is('.popover-confirm')){
              var formData = [];
              formData.push({name:'_token', value: '{{ csrf_token() }}'});
              formData.push({name:'uredjaj_id', value: btn.data('id') });
              formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
              blockElement($(this).parents('.card'));
              $.ajax({
                  url: '/admin/uredjaj/attachUnlink',
                  dataType: "json",
                  data: formData,
                  type: "POST",
                  cache: false,
                  success: function (response) {
                    getAttachForm();
                  },
                  error: function (response) {
                  }
              });
            }
            pdelete.popover('dispose');
          }); 
        });
        return false;
      });
    });
  }

  function loadLinkFrom(element) {
    var newEl = $( "<div id='uredjajLinkContainer'></div>" );
    var mRow = element.parent();
    mRow.after(newEl);

    var formData = [];
    formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
    formData.push({name:'uredjaj_parent_type', value: $("#uAttach").data('type') });
    formData.push({name:'_token', value: '{{ csrf_token() }}'});
    $("#uredjajLinkContainer").load('/admin/uredjaj/attachLinkLoadForm', formData, function() {
      $(this).find('.dropdown').dropdown();
      $(this).find(".uredjaj_cancel").click(function (e) {
        $("#uredjajLinkContainer").remove();
        return false;
      });
      $(this).find(".uredjaj_submit").click(function (e) {
        var form = $(this).closest("form");
        var formData = form.serializeArray();
        var token = false;
        for(const [index, el] of formData.entries()) {
          if(el.name == '_token'){
            token = true;
            break;
          }
        }
        if(!token){
          formData.push({name:'_token', value: '{{ csrf_token() }}'});
        }
        $.ajax({
            url: '/admin/uredjaj/attachLinkSave',
            dataType: "json",
            data: formData,
            type: "POST",
            cache: false,
            success: function (response) {
              getAttachForm();
              if(response.error) {
              }else{
              }
            },
            error: function (response) {
            }
        });

        $("#uredjajEditContainer").remove();
        mRow.addClass('d-flex').removeClass('d-none');
        return false;
      });

    });
  }

  function loadEditFrom(element) {

    var id = element.data('id');
    var newEl = $( "<div id='uredjajEditContainer'></div>" );
    var mRow = element.parent();
    mRow.after(newEl);

    var formData = [];
    formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
    formData.push({name:'uredjaj_parent_type', value: $("#uAttach").data('type') });
    formData.push({name:'uredjaj_id', value: id });
    formData.push({name:'_token', value: '{{ csrf_token() }}'});
    $("#uredjajEditContainer").load('/admin/uredjaj/attachEdit', formData, function() {
      mRow.removeClass('d-flex').addClass('d-none');
      $(this).find(".uredjaj_cancel").click(function (e) {
        $("#uredjajEditContainer").remove();
        mRow.addClass('d-flex').removeClass('d-none');
        return false;
      });
      $(this).find(".uredjaj_submit").click(function (e) {
        var form = $(this).closest("form");
        var formData = form.serializeArray();
        var token = false;
        for(const [index, el] of formData.entries()) {
          if(el.name == '_token'){
            token = true;
            break;
          }
        }
        if(!token){
          formData.push({name:'_token', value: '{{ csrf_token() }}'});
        }
        formData.push({name:'uredjaj_attached_to', value: $("#uAttach").data('id') });
        formData.push({name:'uredjaj_parent_type', value: $("#uAttach").data('type') });
        $.ajax({
            url: '/admin/uredjaj/attachSave',
            dataType: "json",
            data: formData,
            type: "POST",
            cache: false,
            success: function (response) {
              getAttachForm();
              if(response.error) {
              }else{
              }
            },
            error: function (response) {
            }
        });

        $("#uredjajEditContainer").remove();
        mRow.addClass('d-flex').removeClass('d-none');
        return false;
      });
    });
  }


</script>