Merge pull request #111 from lexintegritastech/feature-enhance-ui

Add success and error message for annotation and doctrines

app/javascript/controllers/annotations_controller.js

@@ -81,13 +81,23 @@ export default class extends ApplicationController {
         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/" + current_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/" + doctrine_id + "/annotations", params, function(result, 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/" + current_document_id + "/doctrines/" + doctrine_id
         }
       })
@@ -105,6 +115,8 @@ export default class extends ApplicationController {
         url: "/api/doctrines/" + doctrine_id + "/annotations/" + annotation_id,
         type: 'DELETE',
         success: function() {
+          $('.toast').addClass('bg-danger').show()
+          $( ".toast-body" ).html( "<span><b>Deleted Successfully</b></span>" )
           location.pathname = "/documents/" + current_document_id + "/doctrines/" + doctrine_id
         }
       })

app/javascript/controllers/doctrines_controller.js

@@ -73,15 +73,30 @@ export default class extends ApplicationController {
           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>" )
+        )
       }
     }
   }
@@ -97,6 +112,8 @@ export default class extends ApplicationController {
         type: 'DELETE',
         success: function() {
           location.pathname = "/documents/" + document_id
+          $('.toast').addClass('bg-danger').show()
+          $( ".toast-body" ).html( "<span><b>Deleted Successfully</b></span>" );
         }
       })
     }

app/javascript/packs/application.js

@@ -36,6 +36,10 @@ $(document).on("ready turbolinks:load", function () {
     $('#sidenav').toggleClass('active');
   });
 
+  $("#toast-close").click(function(){
+    $('.toast').hide();
+  }); 
+  
   $(".spinner-border").hide();
   
   var default_config = { altFormat: "m/d/Y", altInput: true, enableTime: false, dateFormat: "Y-m-d", isMobile: true };
@@ -58,7 +62,7 @@ $(document).on("ready turbolinks:load", function () {
     a = $(this), b = $(a.attr('href'))
     if(b.length<=0)return
     event.preventDefault()
-    $('html, body, .tab-content').animate({ scrollTop: b.offset().top }, 700, 'linear')
+    document.getElementById(b[0].id).scrollIntoView( {behavior: "smooth", duration: 700 })
   })
 });
 

app/views/layouts/application.html.erb

@@ -70,5 +70,13 @@
         </div>
       </div>
     </div>
+
+    <div class="toast align-items-center text-white border-0" data-bs-autohide="true" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute;bottom: 20px;right: 10px;">
+      <div class="d-flex">
+        <div class="toast-body">
+        </div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" id="toast-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+    </div>
   </body>
 </html>