Merge pull request #106 from lexintegritastech/improve-main-ui

Improve modal form for doctrines

app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb

@@ -11,7 +11,8 @@
           <label for="subject-name" class="col-form-label"> Subjects </label>
           <%= hidden_field_tag :document_id, nil, data: { target: "doctrines.document_id" } %>
           <%= hidden_field_tag :doctrine_id, nil, data: { target: "doctrines.doctrine_id" } %>
-            <select class="form-control subject-ids-selectize ps-0" name="subject_ids[]" id="subject_ids_" multiple="true"> </select>
+          <select class="form-control subject-ids-selectize ps-0" name="subject_ids[]" id="subject_ids_" multiple="true" required> </select>
+          <div class="invalid-feedback" id="subjects-blank-message"> Subject/s cannot be blank. </div>
         </div>
 
         <div class="mb-3" id="doctine_content_suggestions_div">
@@ -21,12 +22,14 @@
 
         <div class="mb-3">
           <label for="subject-name" class="col-form-label">Head Note</label>
-          <%= text_field_tag :headnote, nil, class: "form-control", placeholder: "Head note", data: { target: "doctrines.headnote" } %>
+          <%= text_field_tag :headnote, nil, class: "form-control", placeholder: "Head note", required: true, data: { target: "doctrines.headnote" } %>
+          <div class="invalid-feedback" id="headnote-blank-message"> Headnote cannot be blank. </div>
         </div>
 
         <div class="mb-3">
           <label for="subject-name" class="col-form-label">Content</label>
-          <%= rich_text_area_tag :content, nil, placeholder: "Doctrine Content", data: { target: "doctrines.content" } %>
+          <%= rich_text_area_tag :content, nil, placeholder: "Doctrine Content", required: true, data: { target: "doctrines.content" } %>
+          <div class="invalid-feedback" id="content-blank-message"> Content cannot be blank. </div>
         </div>
       </div>
       <div class="modal-footer">

app/javascript/controllers/doctrines_controller.js

@@ -53,6 +53,20 @@ export default class extends ApplicationController {
     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,
@@ -70,6 +84,7 @@ export default class extends ApplicationController {
         })
       }
     }
+  }
 
   delete(ev) {
     var doctrine_id = this.element.dataset["doctrineId"], document_id = this.element.dataset["documentId"]

app/javascript/controllers/selectize_controller.js

@@ -18,8 +18,9 @@ export default class extends ApplicationController {
 
     $(".default-selectize").selectize(default_opts);
 
-    var $doctrine_content = $("#doctrineModal").find("input[name='content']");
-    var $trix_content = $("#doctrineModal").find(".trix-content");
+    var $doctrine_modal = $("#doctrineModal")
+    var $doctrine_content = $doctrine_modal.find("input[name='content']");
+    var $trix_content = $doctrine_modal.find(".trix-content");
 
     var doctrine_content_suggestions_opts = {
       onChange: function (value) {
@@ -30,6 +31,7 @@ export default class extends ApplicationController {
           $.get("/api/doctrines/" + value + ".json", {}, function (doctrine, status) {
             if (status === "success") {
               $doctrine_content.val(doctrine.content);
+              $doctrine_modal.find("input[name='headnote']").val(doctrine.headnote)
               $trix_content.val(doctrine.content);
             }
           });