task execution

by AndreiVaranita

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<div class="row quick-nc">
  <div class="col">
    <div class="d-flex flex-row p-1">
      <div class="flex-fill p-1 w-100">
      <!--In caz ca la test nu este atasat nici un action group DIV ce urmeaza nu trebuie inclus in view -->
        <div class="position-relative">
          <div...

JavaScript

$(".action-select").select2({
  width: '100%'
});
$(".select2-selection").height("29px");

$(".select-button").click(function() {
	var $this = $(this);
  var quickNc = $this.closest(".quick-nc");
  var select = quickNc.find(".action-select");
  if($this.hasClass("open-select")) {
  $this.removeClass('open-select');
  return;
  }
  $this.addClass('open-select');
  select.select2('open');
});

$(".action-select").on('select2:select', function(e) {
  var quickNc = $(this).closest(".quick-nc");
  quickNc.find(".non-conformity").val(e.params.data.text);
  quickNc.find(".corrective-action").val(e.params.data.id);
  quickNc.find(".select-button").removeClass('open-select');
});