cdao-pjet/app/javascript/controllers/doctrines_controller.js

import ApplicationController from './application_controller'
export default class extends ApplicationController {
  static targets = ["input", "document_id", "doctrine_id", "headnote", "content"]

  connect () {
    super.connect()
  }

  renderForm () {
    var document_id = this.element.dataset["documentId"], doctrine_id = this.element.dataset["doctrineId"],
        $modal = $("#doctrineModal"), $subject_ids_el = $modal.find(".subject-ids-selectize"), 
        $subject_ids_selectize = $subject_ids_el[0].selectize

    $modal.find("#document_id").val(document_id)

    if (doctrine_id !== null && doctrine_id !== undefined && doctrine_id !== "") {
      $modal.find("#doctine_content_suggestions_div").hide()
      $.get("/api/doctrines/" + doctrine_id + ".json", {}, function (doctrine, status) {
        $modal.find("#doctrine_id").val(doctrine.id)
        if (status === "success") {
          $.get("/api/subjects.json?doctrine_ids=" + doctrine.id, { per_page: 100 }, function (subjects, status) {
            if (status === "success") {
              $.each(subjects, function(i, subject) {
                $subject_ids_selectize.addOption(subject)
              })

              $subject_ids_selectize.refreshOptions()
              $subject_ids_selectize.setValue(doctrine.subject_ids, true)
              $subject_ids_selectize.blur()
              $subject_ids_selectize.close()
            }
          });

          $modal.find(".trix-content").val(doctrine.content)
          $modal.find("#headnote").val(doctrine.headnote)
        }
      })

      $modal.find(".modal-title").text("Update Doctrine")
      $(".selectize-dropdown").hide()
    } else {
      $modal.find("#doctine_content_suggestions_div").show()
      $modal.find(".modal-title").text("New Doctrine")
      $modal.find(".trix-content").val("")
      $subject_ids_selectize.setValue([])
      $modal.find("#doctrine_id").val('')
      $modal.find("#headnote").val('')
    }
  }

  save () {
    var $modal = $("#doctrineModal"), document_id = this.document_idTarget.value, doctrine_id = this.doctrine_idTarget.value
    var params = { subject_ids: $modal.find("select[name='subject_ids[]']").val(), headnote: this.headnoteTarget.value, 
                   content: this.contentTarget.value }


    if (!params.subject_ids.length) {
      $("#subjects-blank-message").show()
    }

    if (!params.headnote.length) {
      $("#headnote-blank-message").show()
    }

    if (!params.content.length) {
      $("#content-blank-message").show()
    }

    if (params.subject_ids.length && params.headnote.length && params.content.length) {
      if (doctrine_id !== null && doctrine_id !== undefined && doctrine_id !== "") {
        $.ajax({
          url: "/api/doctrines/" + doctrine_id,
          type: 'PUT',
          data: params,
          success: function() {
            $(".btn-close-x").trigger("click")
            $('.toast').addClass('bg-success').show()
            $( ".toast-body" ).html( "<span><b>Submitted Successfully</b></span>" ),
            location.pathname = "/documents/" + document_id + "/doctrines/" + doctrine_id
          },
          error: function() { 
            $(".btn-close-x").trigger("click"),
            $('.toast').addClass('bg-danger').show(),
            $( ".toast-body" ).html( "<span><b>Unexpected Error Problem Occurred</b></span>" )
          }
        })
      } else {
        $.post("/api/doctrines", $.extend({ jurisprudence_ids: [document_id] }, params), function(data, status) {
          if(status === 'success') {
            $(".btn-close-x").trigger("click")
            $('.toast').addClass('bg-success').show()
            $( ".toast-body" ).html( "<span><b>Submitted Successfully</b></span>" ),
            location.pathname = "/documents/" + document_id + "/doctrines/" + data.id
          }
        }, 
          $(".btn-close-x").trigger("click"),
          $('.toast').addClass('bg-danger').show(),
          $( ".toast-body" ).html( "<span><b>Unexpected Error Problem Occurred</b></span>" )
        )
      }
    }
  }

  delete(ev) {
    var doctrine_id = this.element.dataset["doctrineId"], document_id = this.element.dataset["documentId"]

    ev.preventDefault();
    const contrim_alert = confirm("Are you sure to delete this record?")
    if (contrim_alert) {
      $.ajax({
        url: "/api/doctrines/" + doctrine_id,
        type: 'DELETE',
        success: function() {
          location.pathname = "/documents/" + document_id
          $('.toast').addClass('bg-danger').show()
          $( ".toast-body" ).html( "<span><b>Deleted Successfully</b></span>" );
        }
      })
    }
  }
}